<template>
    <div>
        <div class="block">
            <div style="position: absolute;top: .6rem;left: .6rem;" @click="goBack">< 返回</div>
            <div style="text-align: center;padding: .6rem 0;height: 1rem;">详情</div>
            <hr>
            <template>
                <div class="item">
                    <div style="font-weight: 900;">{{detail.title}}</div>
                    <div style="font-size: .8rem;">{{detail.create_time}}</div>
                    <div style="margin-top: 1rem;" v-html="detail.content"></div>
                    <div>
                        <template v-for="v1 in detail.img_url">
                            <img :src="v1" style="width: 80px;height: 80px;margin: .5rem .1rem;" @click="viewImg(v1)">
                        </template>
                    </div>
                    <div class="ask">
                        <span class="icon"><span class="el-icon-view"></span><span>{{detail.views_num}}</span></span>
                        <span class="icon"><span class="el-icon-chat-dot-square"></span><span>{{detail.comment_num}}</span></span>
                        <span class="icon" @click="ding"><span class="fa fa-thumbs-o-up"></span><span>{{detail.thumbs_num}}</span></span>
                        <span class="icon" @click="cai"><span class="fa fa-thumbs-o-down"></span><span>{{detail.tread_num||0}}</span></span>
                    </div>
                    <!--<span class="el-icon-lx-delete" @click="delAddress"></span>-->
                </div>
            </template>
            <hr>
            <div>
                <div style="text-align: center;font-size: .8rem;margin: .5rem 0 1rem 0;">{{dynamicCommentList.length}}条评论</div>
                <div class="commentItem" v-for="(v,index) in dynamicCommentList" style="font-size: .8rem;margin: 0 .5rem 1rem;">
                    <div style="display: flex;">
                        <img class="userHeadImg" :src="v.head_url" alt="" style="margin: 0 .5rem 0 0;">
                        <div>
                            <span style="display:inline-block;font-weight: 900;color: #8c939d;margin-top: .1rem;">{{v.user_name}}</span>
                            <div style="margin-top: .2rem;">{{v.content}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--评论框-->
        <div style="position: absolute;bottom: 0;color: #fff;width: 100%;border-top: 1px solid #ccc;display: flex;">
            <input class="commentInp" type="text" placeholder="留下你的精彩评论吧" v-model="content">
            <el-button style="width: 20%;border-top: none;" @click="addComment">发送</el-button>
        </div>
        <div id="viewImg"></div>
    </div>
</template>

<script>
    import pub from '../../utils/pub'
    export default {
        name: "notice-detail",
        data(){
            return{
                uid: '',
                housinggestateId: '',
                detail: {},
                dynamicCommentList: [],

                content: '',
            }
        },
        methods: {
            loadopen() {
                this.loading = this.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.2)'});setTimeout(() => {this.loading.close();}, 5000);
            },
            loadclose() {this.loading.close();},
            // 分页导航
            handleCurrentChange(val) {
            },
            goBack(){
                this.$router.push('/mobile/talk')
            },
            // 获取详情
            getDetail() {
                this.loadopen();
                this.config.mpost('/api/dynamic/dynamic/findDynamicById', {id: this.uid, housinggestateId: this.housinggestateId}).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.detail = res.data.dynamic;
                        this.detail.img_url = this.detail.img_url.split(',')
                    }else {
                        this.$message.error(this.config.mobileError(res.data));
                    }
                })
            },
            search() {
            },
            getComment(){
                this.loadopen();
                this.config.mpost('/api/dynamic/dynamiccomment/findAll', {dynamicId: this.uid}).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.dynamicCommentList = res.data.dynamicCommentList;
                    }else {
                        this.$message.error(this.config.mobileError(res.data));
                    }
                })
            },
            // 添加评论
            addComment(){
                if(!this.content) return;
                let obj = {
                    dynamicId: this.uid,
                    content: this.content,
                    replyId: '',
                    replyUserId: this.detail.user_id,
                    replyUserName: this.detail.user_nick,
                }
                this.loadopen();
                this.config.mpost('/api/dynamic/dynamiccomment/add', obj).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.$message.success(res.data.message);
                        this.getComment();
                        this.content = ''
                    }else {
                        this.$message.error(this.config.mobileError(res.data));
                    }
                })
            },
            // 顶
            ding(){
                this.loadopen();
                this.config.mpost('/api/dynamic/dynamicthumbs/addOrDeleteDynamicThumbs', {id: this.detail.id}).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.$message.success(res.data.message);
                        this.getDetail()
                    }else {
                        this.$message.error(this.config.mobileError(res.data));
                    }
                })
            },
            // 踩
            cai(){
                this.loadopen();
                this.config.mpost('/api/dynamic/dynamictread/addOrDeleteDynamicTread', {id: this.detail.id}).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.$message.success(res.data.message);
                        this.getDetail()
                    }else {
                        this.$message.error(this.config.mobileError(res.data));
                    }
                })
            },
            // 预览图片
            viewImg(url){
                pub.viewBigImg(url)
            },
            // 分页导航
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.getData(val);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
        },
        mounted(){
            let obj = this.$route.query;
            this.uid = obj.id;
            this.housinggestateId = obj.housinggestateId;
            this.getDetail()
            this.getComment()
        }
    }
</script>

<style scoped lang="less">
    .block{
        .item{
            color: #333;
            padding: .5rem 1rem;
            /*margin: .8rem;*/
            /*box-shadow: 0 0 10px 0 #ccc;*/
            border-radius: 6px;
            position: relative;
            .tit{
                color: #666;
            }
            .el-icon-lx-delete{
                position: absolute;top: 10px;right: 10px;color: #8c939d;
            }
        }
    }

    .commentInp{
        height: 2.5rem;
        width: 80%;
        border: none;
        border-bottom: 1px solid #ccc;
        color: #333;
        padding: 0 .5rem;
        outline: none;
        /*background: #13ce66;*/
    }

    .userHeadImg{
        width: 2rem;
        height: 2rem;
        border-radius: 1rem;
    }

    .ask{
        color: #888;
        .icon{
            display: inline-block;
            margin: 1rem 1rem 0 0;
        }
    }

    .text{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
</style>
